<template>
	<view class="content tabbar_content">
		<nav-tab :navIndex="0"></nav-tab>
		<!-- 搜索 -->
		<view class="p-2 bg-white">
			<view @click="searchFocus"><search-view :disabled="true"></search-view></view>
		</view>
		<!-- 轮播图 -->
		<swiper :list="bannerList" @loginAlert="loginAlert = false" />
		<!-- 选择 -->
		<u-sticky>
			<view class="container select_warp">
				<view class="flex justify-around bg-white py-2 rounded_10 shadow">
					<view class="flex align-center font_24" v-for="(item, index) of columnList" :key="index" @click="columChange(item, index)" :class="{ c_main: item.colorShow }">
						{{ item.title }}
						<u-icon name="arrow-down-fill" :color="item.colorShow ? '#CF1526' : '#999'" size="8"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
		<u-picker
			:show="pickerShow"
			:columns="columns"
			:keyName="keyName"
			@close="pickerShow = false"
			@cancel="pickerCancel"
			@confirm="confirm"
			closeOnClickOverlay
			confirmText="筛选"
			cancelText="重置"
			cancelColor="#333"
			confirmColor="#fff"
			:title="pikerTitle"
		></u-picker>
		<!-- 展览地区 -->
		<view style="z-index: 10000;">
			<lotus-address
				v-if="lotusAddressData.visible"
				@choseVal="choseValue"
				@cancel="pickerCancel"
				@close="addressClose"
				:lotusAddressData="lotusAddressData"
				address-type="index"
			></lotus-address>
		</view>
		<!-- 时间选择器 -->
		<u-datetime-picker
			title="举办日期"
			:show="datatimeShow"
			v-model="dataTime"
			mode="date"
			@close="datatimeShow = false"
			@confirm="dataTimeConfirm"
			@cancel="pickerCancel"
			closeOnClickOverlay
			confirmText="筛选"
			cancelText="重置"
			cancelColor="#333"
			confirmColor="#fff"
		></u-datetime-picker>
		<view class="container mt-2">
			<!-- 热点展会 -->
			<view class="bg-white p-2 rounded_10 shadow" v-if="hotList.length >= 1">
				<title-view tit="热点展会" :look="false"></title-view>
				<view v-if="hotList.length == 0">
					<view class="p-2"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
				</view>
				<view v-else><exhibition :list="hotList" :bgstyle="false"></exhibition></view>
			</view>
			<!-- 推荐展会 -->
			<view class="bg-white p-2 rounded_10 shadow my-2">
				<title-view tit="推荐展会" :look="false"></title-view>
				<view v-if="remList.length == 0">
					<view class="p-2" style="padding-bottom: 150rpx;"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
				</view>
				<view class="recommend_warp flex flex-wrap justify-between" v-else>
					<view class="recommend_item mt-2" v-for="(item, index) of remList" :key="index" @click="toJoin(item)">
						<view class="">
							<image :src="item.thumb" mode="aspectFill"></image>
							<text class="status" :class="[classState(item.activity_status)]">{{ textState(item.activity_status) }}</text>
						</view>
						<view class="font c_3 lh_42 font-weight-bold mt-1">{{ item.title }}</view>
						<view class="c_9 my-1 font_24">
							<text>{{ item.start_time }}</text>
							<text class="ml-3">{{ item.address }}</text>
						</view>
					</view>
					<u-loadmore :status="loadStatus" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
				</view>
			</view>
		</view>
		<!-- 热力榜 -->
		<!-- <view :class="{ hot_hide: hothide }" class="hot" @click="hotChange"><image src="/static/img2/home/hot_icon.png" mode="aspectFit"></image></view> -->
		<!-- 首页登录弹窗 -->
		<view class="loginPopup fixed-bottom py-1 px-2 flex align-center" v-if="loginAlert">
			<view class="text-white h6 lh_42">登录后可查看更多客户信息、交换名片、在线询价、产品对比</view>
			<button class="login_btn c_main font_24 ml-2" @click="goPages('/subPages/login/wx_login')">去登录</button>
			<view class=" ml-2"><u-icon name="close" color="#ffffff" @click="loginAlert = false"></u-icon></view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>
<script>
import swiper from '@/components/swiper/swiper.vue';
import navTab from '@/components/nav-tab/nav-tab.vue';
import searchView from '@/components/search/search.vue';
import titleView from '@/components/titleView/title.vue';
import exhibition from '@/components/exhibition/exhibition.vue';
import lotusAddress from '@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue';
import { banner } from '@/api/home/home.js';
import { exhibitionColumn, exhibitionList } from '@/api/exhibition/exhibition.js';
import util from '@/common/js/util.js';
export default {
	components: { swiper, navTab, searchView, titleView, exhibition, lotusAddress },
	data() {
		return {
			page: 1,
			suo: false,
			loadStatus: 'loadmore',
			bannerList: [],
			columnList: [],
			pickerShow: false,
			datatimeShow: false,
			columns: [],
			keyName: 'title',
			columIdx: 0,
			isFifter: false,
			trade: '', //行业分类
			expo: '', //展览地区
			dataTime: '', //举办日期
			startTime: '',
			state: '', //展览状态
			hotList: [], //热点展会
			remList: [], //推荐展会
			//展会信息
			CompanyData: {
				info: {},
				label: []
			},
			detailShow: false,
			status: 0, //展会状态
			loginAlert: false,
			pikerTitle: '',
			scrollTop: 0,
			// 地区选择
			lotusAddressData: {
				visible: false,
				provinceName: '',
				cityName: '',
				townName: ''
			},
			hothide: false //热力榜是否全展示出来
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	computed: {
		classState(val) {
			return function(val) {
				switch (val) {
					case 1:
						return 'be_start';
						break;
					case 2:
						return 'have_start';
						break;
					case 3:
						return 'have_end';
						break;
					default:
						return 'be_start';
						break;
				}
			};
		},
		textState(val) {
			return function(val) {
				switch (val) {
					case 1:
						return '即将开始';
						break;
					case 2:
						return '正在开展';
						break;
					case 3:
						return '已结束';
						break;
					default:
						return '即将开始';
						break;
				}
			};
		}
	},
	//监测页面滑动
	onPageScroll(e) {
		setTimeout(() => {
			this.hothide = true;
		}, 1000);
	},
	onReachBottom() {
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.loadStatus = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.getExhibitionList();
			}, 1000);
		}
	},
	onShow() {
		uni.setStorageSync('productType', 'admin');
	},
	onLoad() {
		if (!uni.getStorageSync('userInfo').hasLogin) {
			this.loginAlert = true;
		}
		this.getInfo();
		this.getExhibitionList();
		this.dataTime = Number(new Date());
		// this.dataTime = util.happenTimeFun(Number(new Date()), 'line');

		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		// 去搜索详情页
		searchFocus() {
			uni.navigateTo({
				url: '/subPages/home_search/home_search'
			});
		},
		getInfo() {
			// 轮播图
			banner({ type: 3 }).then(res => {
				if (res.code == 0) {
					this.bannerList = res.data.list;
				} else {
					uni.$u.toast(res.msg);
				}
			});
			// 获取展会栏目
			exhibitionColumn()
				.then(res => {
					if (res.code == 0) {
						this.columnList = res.list;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取展会栏目失败', err);
				});
		},
		getExhibitionList() {
			let msg = {
				cate_id: this.trade,
				district_cn: this.expo,
				start_time: this.dataTime,
				status: this.state,
				page: this.page,
				token: uni.getStorageSync('userInfo').token || ''
			};
			exhibitionList(msg)
				.then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.hotList = this.isFifter ? [] : res.list.hotspot_list.data;
						// this.remList = res.list.recommend_list.data;
						this.remList.push(...res.list.recommend_list.data);
						if (this.remList.length == 0) {
							this.loadStatus = 'nomore';
							this.suo = false;
						} else if (this.remList.length < 10) {
							this.loadStatus = 'nomore';
							this.suo = false;
						} else {
							this.loadStatus = 'loadmore';
							this.suo = true;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取展会列表失败', err);
				});
		},
		columChange(val, idx) {
			this.columns = [];
			this.columIdx = idx;
			this.columns.push(val.data);
			if (idx == 0) {
				this.keyName = 'title';
				this.pikerTitle = '行业分类';
				this.pickerShow = true;
			} else if (idx == 1) {
				this.keyName = 'district_cn';
				this.pikerTitle = '展览地区';
				this.openPicker();
			} else if (idx == 2) {
				this.dataTime = util.happenTimeFun(Number(new Date()), 'line');
				this.keyName = 'start_time';
				this.pikerTitle = '举办日期';
				this.datatimeShow = true;
			} else {
				this.keyName = 'title';
				this.pikerTitle = '展览状态';
				this.pickerShow = true;
			}
		},
		confirm(val) {
			if (this.columIdx == 0) {
				this.trade = val.value[0].title;
			} else if (this.columIdx == 1) {
				// this.expo = val.value[0].district_cn;
			} else if (this.columIdx == 2) {
				// this.dataTime = val.value[0].start_time;
			} else {
				this.state = val.value[0].status;
			}
			this.fiflterInfo();
		},
		async fiflterInfo() {
			this.columnList[this.columIdx].colorShow = true;
			this.page = 1;
			this.remList = [];
			this.isFifter = true;
			this.dataTime = util.happenTimeFun(this.startTime, 'line');
			await this.getExhibitionList();
			this.pickerShow = false;
		},
		async pickerCancel() {
			// if (this.columIdx == 0) {
			this.trade = '';
			// } else if (this.columIdx == 1) {
			this.expo = '';
			// } else if (this.columIdx == 2) {
			this.dataTime = '';
			// } else {
			this.state = '';
			// }
			this.page = 1;
			this.hotList = [];
			this.remList = [];
			this.isFifter = false;
			await this.getExhibitionList();
			this.pickerShow = false;
			this.lotusAddressData.visible = false; //地址框关闭
			this.datatimeShow = false; //时间选择框关闭
			this.columnList.forEach(item => {
				item.colorShow = false;
			});
			// this.columnList[this.columIdx].colorShow = false;
		},
		//打开地区选择器
		openPicker() {
			this.lotusAddressData.visible = true;
			this.lotusAddressData.provinceName = '北京市';
			this.lotusAddressData.cityName = '北京市';
			this.lotusAddressData.townName = '东城区';
		},
		//回传已选的省市区的值
		choseValue(res) {
			//res数据源包括已选省市区与省市区code
			// console.log(res);
			this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
			//res.isChose = 1省市区已选 res.isChose = 0;未选
			if (res.isChose) {
				this.lotusAddressData.provinceName = res.province; //省
				this.lotusAddressData.cityName = res.city ? '/' + res.city : res.city; //市
				this.lotusAddressData.townName = res.town ? '/' + res.town : res.town; //区
				// this.expo = `${res.province}/${res.city}/${res.town}`;
				this.expo = this.lotusAddressData.provinceName + this.lotusAddressData.cityName + this.lotusAddressData.townName;
				this.fiflterInfo();
			}
		},
		addressClose() {
			this.lotusAddressData.visible = false;
		},
		// 时间选择
		dataTimeConfirm(e) {
			this.startTime = e.value;
			// this.dataTime = util.happenTimeFun(e.value, 'line');
			this.datatimeShow = false;
			this.fiflterInfo();
		},
		toJoin(val) {
			// activity_status   1 即将开始，2 已开始，3，已结束
			// if (val.activity_status == 1) {
			// 	uni.navigateTo({
			// 		url: '/subPages/exhibition/before?id=' + val.id + '&active=' + val.activity_status
			// 	});
			// } else {
			uni.setStorageSync('productType', 'admin');
			uni.navigateTo({
				url: '/subPages/exhibition/index?id=' + val.id + '&active=' + val.activity_status
			});
			// }
		},
		// 热力榜
		hotChange() {
			if (this.hothide) {
				this.hothide = false;
			} else {
				// console.log("进入热力榜");
				uni.navigateTo({
					url: '/pages/home/hot'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep uni-swiper .uni-swiper-dots-horizontal {
	bottom: 100rpx;
	left: 90%;
}
.select_warp {
	margin-top: -30rpx;
	position: relative;
}
.hotspot {
	position: relative;
	image {
		width: 100%;
		height: 220rpx;
	}
	.cont {
		.time {
			color: $color8;
		}

		.tag {
			text {
				background-color: #f2f2f2;
				border-radius: 10rpx;
			}
		}
	}
	.detail_popup {
		max-height: 700rpx;
	}
}
.recommend_warp {
	width: 100%;
	.recommend_item {
		width: calc((100% / 2) - 10rpx);
		position: relative;
		image {
			width: 100%;
			height: 220rpx;
		}
	}
}
.status {
	position: absolute;
	top: 0;
	right: 0;
	color: #ffffff;
	font-size: 24rpx;
	padding: 5rpx 15rpx;
	border-radius: 0 10rpx 0 10rpx;
}
.be_start {
	background: $color14;
}
.have_start {
	background: #f0722d;
}
.have_end {
	background: rgba(144, 147, 153, 1);
}
.loginPopup {
	/*  #ifdef H5 */
	bottom: 110rpx;
	/*  #endif  */
	/*  #ifdef MP-WEIXIN */
	bottom: 20rpx;
	/*  #endif  */
	width: 95%;
	// height: 106rpx;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 14rpx;
	margin: 0 20rpx;
	.login_btn {
		width: 180rpx;
		height: 48rpx;
		line-height: 48rpx;
	}
}
::v-deep .u-toolbar__wrapper__confirm {
	background-color: $color14;
	border-radius: 30rpx;
	padding: 5rpx 30rpx !important;
	margin-right: 25rpx;
}
::v-deep .u-toolbar__wrapper__cancel {
	border-radius: 30rpx;
	padding: 5rpx 30rpx !important;
	border: 1px solid #bebebe;
	margin-left: 25rpx;
}
.hot {
	position: absolute;
	right: 15rpx;
	transition: right 0.5s;
	top: 50%;
	z-index: 99;
	position: fixed;

	image {
		width: 57rpx;
		height: 212rpx;
	}
}
.hot_hide {
	right: -44rpx !important;
	transition: right 0.5s;
}
</style>
